<template>
  <div class="page-content bg-white">
    <Collapse ref="collapse">
      <template v-slot:content>
        <div>
          <yz-condition-filter
            @resetSearch="resetSearch"
            @onSubmit="onSubmit"
          >
            <select-tooltip
              v-model="device"
              isShowAll
              :multiple="false"
              :options="devicesOption"
              msg="加工设备"
            ></select-tooltip>
          </yz-condition-filter>
        </div>
      </template>
    </Collapse>
    <div class="margin-l-20 margin-r-20 wrapper">
      <div class="position padding-l-20 padding-r-20">所在车间: {{workshopName}}</div>
      <div>
        <div v-if="dataInfo.length === 0" class="flex items-center justify-center padding-20" style="color: #999999">
          暂无数据
        </div>
        <div class="padding-l-20 padding-t-20 flex wrap" v-else>
          <div class="content-box flex items-center" v-for="(item, index) in dataInfo" :key="index" @click="showDetail(item)">
            <div class="margin-r-20 image"></div>
            <div>
              <div>设备编号: {{ item.assetNumber }}</div>
              <div>设备名称: {{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 停机时长明细 -->
    <downtime-duration-detail
      :show="duringShow"
      :since="params.since"
      :before="params.end"
      :deviceId="currentDeviceId"
      :scheduling="scheduling"
      @close="duringShow = false"
      @fillIn="getDataInfo"
    />
  </div>
</template>

<script>
import Collapse from 'components/collapse/index'
import downtimeDurationDetail from 'src/pages/status-monitor-v3/components/stop-time-dialog'
import { getStopNotWrite } from '../../boot/home/home'
import { getDeviceIds } from '../../boot/job/process-order'

export default {
  name: 'stop-reporting',
  components: {
    Collapse,
    downtimeDurationDetail
  },
  data () {
    return {
      devicesOption: [],
      device: 'all',
      workshopId: '',
      workshopName: '',
      params: {
        schemeId: '',
        schemeLevel: '',
        since: '',
        end: '',
        deviceId: ''
      },
      dataInfo: [],
      devicesMap: {},
      scheduling: [],
      duringShow: false,
      currentDeviceId: ''
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.dataInfo = []
      vm.params.schemeId = vm.$route.query.schemeId
      vm.params.schemeLevel = vm.$route.query.schemeLevel
      vm.params.since = vm.$route.query.since
      vm.params.end = vm.$route.query.end
      vm.workshopId = vm.$route.query.workshopId
      vm.workshopName = vm.$route.query.workshopName
      vm.getDeviceIds().then(() => {
        vm.getDataInfo()
      })
    })
  },
  methods: {
    // 获取加工设备
    getDeviceIds () {
      const params = {}
      params['level'] = this.params.schemeLevel
      params['schemeId'] = this.params.schemeId
      return new Promise(resolve => {
        getDeviceIds(params).then(res => {
          this.devicesMap = {}
          let devicesOption = []
          if (res.data.length) {
            const options = []
            res.data.forEach(item => {
              this.devicesMap[item.id] = item
              options.push({
                assetNumber: item.assetNumber,
                'label': `${item.name} (${item.assetNumber || ''})`,
                'value': item.id
              })
            })

            devicesOption.push(...options)

            this.device = 'all'
          } else {
            this.device = 'all'
          }
          this.devicesOption = devicesOption
          resolve()
        })
      })
    },
    getDataInfo () {
      // 计算结束时间
      this.params.deviceId = this.device === 'all' ? '' : this.device
      this.$q.loading.show()
      getStopNotWrite(this.params).then(res => {
        this.dataInfo = res.data.map(item => {
          return {
            name: this.devicesMap[item].name,
            assetNumber: this.devicesMap[item].assetNumber,
            deviceId: item
          }
        })
      }).finally(() => {
        this.$q.loading.hide()
      })
    },
    // 点击查询按钮
    onSubmit () {
      this.getDataInfo()
    },
    // 点击重置按钮
    resetSearch () {
      this.params.schemeId = this.$route.query.schemeId
      this.params.schemeLevel = this.$route.query.schemeLevel
      this.params.since = this.$route.query.since
      this.params.end = this.$route.query.end
      this.params.deviceId = ''
      this.device = 'all'
    },
    showDetail (item) {
      this.currentDeviceId = item.deviceId
      this.duringShow = true
    },
    getDetailedCount () {
      console.log(11)
    }
  }
}
</script>

<style scoped lang="stylus">
.wrapper{
  border: 1px solid #D3D3D3;
  border-radius: 6px;
  overflow: hidden

}
.position{
  width: 100%;
  height: 48px;
  line-height: 48px;
  background: #5F77FD;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
}
.image{
  width 64px;
  height: 64px;
  background url('../../statics/img/stop-reporting.png') no-repeat;
  background-size 100% 100%
}
.content-box{
  width: 383px;
  height: 78px;
  background: #F8F8F8;
  opacity: 0.94;
  border-radius: 6px;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  padding 0 24px;
}
</style>
